<template>
    <div span="20" class="warp-right warp-common">
        <div class="page-top">
            <span class="title">{{ $route.name}}</span>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="item in $route.matched" :to="item.path">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page-search">
            <el-input
                    placeholder="请输入关键词"
                    icon="search"
                    v-model="keywords"
                    v-on:change="seach">
            </el-input>
            <div class="opera">
                <el-button type="primary" icon="plus" @click="addItem">添加</el-button>
            </div>
        </div>
        <div class="page-main">
            <el-table class="page-main-cont"
                    :data="itemsData"
                    border
                    style="width: 100%">
                <el-table-column
                        label="编号"
                        width="100"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="标题"
                        prop="title">
                </el-table-column>
                <el-table-column
                        label="类型"
                        width="100"
                        >
                    <template scope="scope">
                        <el-tag v-if="scope.row.typeId==1">城市新闻</el-tag>
                        <el-tag v-if="scope.row.typeId==2">社区新闻</el-tag>
                        <el-tag v-if="scope.row.typeId==3">知识分享</el-tag>
                        <el-tag v-if="scope.row.typeId==4">公告</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="时间"
                        width="180"
                        >
                    <template scope="scope">
                        {{scope.row.createdAt | moment}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="150">
                    <template scope="scope">
                        <el-button
                                size="small"
                                @click="itemEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click="itemDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    small
                    :page-size="pagination.pages"
                    layout="prev, pager, next"
                    v-on:current-change="currentChange"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <el-dialog :title="editForm.title" v-model="editForm.visible">
            <el-form :model="editForm.data" :rules="editForm.rules" ref="ruleForm.data">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editForm.data.title"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="cover">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-upload
                                    action="http://localhost:9000/api/upload/image"
                                    type="drag"
                                    name="file"
                                    :thumbnail-mode="true"
                                    :on-preview="imagePreview"
                                    :on-remove="imageRemove"
                                    :default-file-list="fileList"
                                    :on-success="imageUploadSuc"
                                    :prop="fileList"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型" prop="typeId">
                                <el-radio-group v-model="editForm.data.typeId">
                                    <el-radio class="radio" label="1">城市新闻</el-radio>
                                    <el-radio class="radio" label="2">社区新闻</el-radio>
                                    <el-radio class="radio" label="3">只是分享</el-radio>
                                    <el-radio class="radio" label="4">公告</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="" prop="content">
                    <quill-editor ref="myTextEditor"
                                  v-model="editForm.data.content"
                                  @change="onEditorChange($event)">
                    </quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEditModal">取 消</el-button>
                <el-button type="primary" ng-if="editForm.title==='编辑'" @click.native="handleSubmit('ruleForm.data')">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</template>
<style>
    .page-top .el-breadcrumb{
        float:right;
    }
    .page-search{
        padding:10px;
        background:#fff;
        margin-top:10px;
        border-bottom:1px solid #eee;
    }
    .page-main{
        background:#fff;
        flex:1;
    }
    .warp-common{
        display:flex;
        flex-direction: column;
    }
    .Sysnewsprev{
        max-width:100%;
    }
    .SysnewsCover img{
        width:100%;
    }
</style>
<script>
import Api from '../../api/index'
import { quillEditor } from 'vue-quill-editor'
export default {
  data() {
    return {
      itemsData: [],
      pagination:{
        total:1,
        pages:1,
        currentPage:1
      },
      keywords:"",
      dialogFormVisible:false,
      editForm:{
        visible:false,
        title:"编辑",
        data:{
            index:"",
            id:"",
            title:"",
            typeId:1,
            cover:"",
            content:""
          },
          rules:{
            title:[
                { title: true, message: '请输入标题', trigger: 'blur' },
                { min: 8, message: '最少 8 个字符', trigger: 'blur' }
            ],
            content:[
                { required: true, message: '请填写内容', trigger: 'blur' },
                { min: 15, message: '最少 15 个字符', trigger: 'blur' }
            ],
            typeId:[
                { required: true, message: '请选择类型', trigger: 'blur' },
            ],
            cover:[
                { required: true, message: '请上传封面', trigger: 'blur' },
            ]
          }
      },
      fileList: [{url: ''}]
    }
  },
  components:{
    quillEditor
  },
  methods: {
    itemEdit(index, row) {
         console.log(row.link);
        this.editForm.visible=true;
        this.editForm.data.index=index;
        this.editForm.data.id=row.id;
        this.editForm.data.title=row.title;
        this.editForm.data.cover=row.cover;
        this.editForm.data.typeId=row.typeId;
        this.editForm.data.content=row.content;
        this.editForm.data.remark=row.remark;
        this.fileList[0].url=row.cover;
     },
     addItem(){
        this.editForm.data.index="";
        this.editForm.data.id="";
        this.editForm.data.title="";
        this.editForm.data.content="";
        this.editForm.data.cover="";
        this.editForm.data.remark="";
        this.fileList[0].url="";
        this.editForm.visible=true;
     },
     imageRemove(file, fileList) {
         this.editForm.data.path="";
      },
      imagePreview(file) {
        console.log(file);
      },
      //图片上传成功
      imageUploadSuc(response, file, fileList){
        this.editForm.data.cover=response.object.path;
        this.fileList[0].url=response.object.path;
      },
      closeEditModal(){
        this.editForm.visible=false;
        this.editForm.data.index="";
        this.editForm.data.id="";
        this.editForm.data.name="";
        this.editForm.data.path="";
        this.editForm.data.link="";
        this.fileList[0].url="";
      },
      itemDelete(index,row){
        this.$confirm('此操作将不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log(row.id);
            Api.deleteSysnews(row.id).then((response)=>{
                if(response.data.code===200){
                    this.itemsData.splice(index,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                     });
                }else{
                    this.$message.error(response.data.msg);
                }
            })

        })
       },
       seach(){
        if(this.keywords===""){
            Api.getSysnews({page:1}).then((response) => {
              this.itemsData=response.data.object.sysnews;
              console.log(this.itemsData);
            })
        }else{
            Api.searchSysnews(this.keywords).then((response)=>{
                if(response.data.code===200){
                    this.itemsData=response.data.object;
                }else{
                    this.$message.error(response.data.msg);
                }
            })
        }

       },
       onEditorChange({editor,html,text}){
        this.editForm.data.remark=text;
       },
       currentChange(currentPage){
        Api.getSysnews({page:currentPage}).then((response) => {
          this.itemsData=response.data.object.sysnews;
          this.pagination=response.data.object.pagination;
        })
       },
       handleSubmit(formName){
       this.$refs[formName].validate((valid) => {
          if (valid) { //表单验证成功
            if(this.editForm.data.cover===""){
                        this.$message.error('请先选择图片');
                        return false;
             }
            if(this.editForm.data.id===""){
                this.editForm.data.typeId=parseInt(this.editForm.data.typeId);
                Api.createSysnews(this.editForm.data).then((response)=>{
                    if(response.data.code===200){
                        this.$message({
                          message: response.data.msg,
                          type: 'success'
                        });
                        //this.$router.go(0);
                    }else{
                        this.$message.error(response.data.msg);
                    }
                })
            }else{
                Api.updateSysnews(this.editForm.data).then((response)=>{
                    if(response.data.code===200){
                        console.log(this.editForm.data.index);
                        this.itemsData[this.editForm.data.index].title=this.editForm.data.title;
                        this.itemsData[this.editForm.data.index].remark=this.editForm.data.remark;
                        this.itemsData[this.editForm.data.index].typeId=this.editForm.data.typeId;
                        this.itemsData[this.editForm.data.index].cover=this.editForm.data.cover;
                        this.itemsData[this.editForm.data.index].content=this.editForm.data.content;
                        this.$message({
                          message: '修改成功',
                          type: 'success'
                        });
                        this.editForm.visible=false;
                    }else{
                        this.$message.error(response.data.msg);
                    }
                    console.log(response.data);
                })
            }
          } else {//表单验证失败
            console.log('error submit!!');
            return false;
          }
        });
      }

  },
  mounted() {
      Api.getSysnews({page:1}).then((response) => {
          if(response.data.code===200){
            this.itemsData=response.data.object.sysnews;
            this.pagination=response.data.object.pagination;
          }else{
            this.$message.error(response.data.msg);
          }
        })
   }
}
</script>
